// 数据逻辑====界面逻辑=========事件逻辑
//面向对象======封装   继承   多态
/* 
==============数据逻辑
 */
//商品对象
class Cood{
	constructor(goods){
		this.goods = goods;
		this.chooseNum = 0;
	}
	//获取商品的总价
	getAmountPrice(){
		return this.chooseNum = this.goods.price;
	}
	//添加购买商品的数量
	increse(){
		this.chooseNum++;
	}
	//减少购买商品的数量
	decrese(){
		if(this.chooseNum <= 0){
			return
		}
		this.chooseNum--;
	}
}
//界面数据对象

class UiData{
	constructor(){
		const goodsList = [];
		goods.forEach(val =>{
			const goods = new Goods(val);
			goodsList.push(goods)
		})
		this.goodsList = goodsList;
		//配送费
		this.freight = 5;
		this.freightThreshold = 30;
	}
	//获取所有商品的总价
	getAmountPrice(){
		let sumPrice = 0;
		this.goodsList.forEach(val =>{
			sumPrice += val.getAmountPrice()
		})
		return sumPrice;
	}
	//获取到起送门槛
	getFreightThreshold(){
		return this.getFreightThreshold() < 0;
	}
	//获取所有选中商品的数量
	getAllChoosedNum(){
		let sumNum = 0;
		this.goodsList.forEach(val =>{
			sumNum +=val.chooseNum
		})
		return sumNum
	}
	//是否有选中商品
	isChoosedGoods(){
		return this.getAllChoosedNum > 0
	}
	//增加购买数量
	increse(index){
		this.goodsList[index].increse()
	}
	//减少购买数量
	decrese(index){
		this.goodsList[index].decrese()
	}
	
}

/* 
 *===============界面逻辑
 */

class UI{
	constructor(){
		this.uiData = new uiDate()
		this.doms = {
			goodsList:document.querySelector('.goods-list')
		}
	}
	//初始化页面
	initPage(){
		let html = '';
		this.uiData.goodsList.forEach(val =>{
			const goods = val.goods;
			html += ` <div class="goods-item">
	          <img src="${goods.pic}" alt="" class="goods-pic" />
	          <div class="goods-info">
	            <h2 class="goods-title">${goods.title}</h2>
	            <p class="goods-desc"> ${goods.desc} </p>
	            <p class="goods-sell">
	              <span>月售 ${goods.sellNumber}</span>
	              <span>好评率${goods.favorRate}%</span>
	            </p>
	            <div class="goods-confirm">
	              <p class="goods-price">
	                <span class="goods-price-unit">￥</span>
	                <span>${goods.price}</span>
	              </p>
	              <div class="goods-btns">
	                <i class="iconfont i-jianhao"></i>
	                <span>${val.chooseNum}</span>
	                <i class="iconfont i-jiajianzujianjiahao"></i>
	              </div>
	            </div>
	          </div>
	        </div>`
		})
		this.doms.goodesList.innerHTML = html;
	}
	refrreshGoodsItem(index){
		const goodsItem = this.doms.goodsList.children[index]
		if(this.uiData.)
		goodsItem.classList.add('active')
		
	}
}

const UI = new UI();